import Image from 'next/image'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'

import complete from '@/assets/images/complete.png'
import styles from '@/pages/entityForm/styles/index.module.less'
import { GlobalState } from '@/store'

export default function TankYou({ t }: { t: any }) {
  const { authorities } = useSelector((state: GlobalState) => state)

  const [time, setTime] = useState(15)
  const router = useRouter()

  useEffect(() => {
    if (time == 0) goBack()
    const timer = setInterval(() => {
      if (time > 0) setTime(time - 1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [time])

  const goBack = () => {
    authorities?.includes('ROLE_ADMIN') ? router.push('/home') : router.push('/myTasks')
  }

  return (
    <div className={styles['form-complete']}>
      <Image src={complete} className={styles['complete-icon']} alt="complete" />
      <h4 className={styles['complete-title']}>{t['form.complete.title']}</h4>
      <span className={styles['complete-article']}>{t['form.complete.article']}</span>
      <div className={styles['form-button-pre']} onClick={() => goBack()}>
        <span className={styles['button-text']}>{t['form.complete.countdown'] + time + 's'}</span>
      </div>
    </div>
  )
}
